<template>
    <div class="wrapper">
        <bui-tabbar :tabItems="tabTitles" 
                    showSelectedLine=true 
                    @change="onItemChange" 
                    v-model="currentTab"
                    background="#FFFFFF"
                    selectedBackground="#FFFFFF"
                    normalColor="#666666"
                    selectedColor="#f49428"
                    borderBottomColor="#f49428"
                    titleSize="30px"></bui-tabbar>
            <slider class="slider" @change="onSliderChange" :index="currentTab">
                <div class="slider-item">
                    <scroller class="container" :style="scrollerStyle">
                        <div class="upload-div">
                            <text style="color:#999999;margin-top:20">现场、机房、轿厢、轿顶、层站、底坑(以上位置必须上传)
                            </text>
                            <div class="img-row">
                                <div class="img-div" @click="previewPhoto(0,heyPath)">
                                    <image class="image" :src="heyPath"></image>
                                </div>
                                <div class="img-div" @click="previewPhoto(1,jifPath)">
                                    <image class="image" :src="jifPath"></image>
                                </div>
                            </div>
                            <div class="img-row">
                                <div class="img-div" @click="previewPhoto(2,jiaoxPath)">
                                    <image class="image" :src="jiaoxPath"></image>
                                </div>
                                <div class="img-div" @click="previewPhoto(3,jiaodPath)">
                                    <image class="image" :src="jiaodPath"></image>
                                </div>
                            </div>
                            <div class="img-row">
                                <div class="img-div" @click="previewPhoto(4,cengzPath)">
                                    <image class="image" :src="cengzPath"></image>
                                </div>
                                <div class="img-div" @click="previewPhoto(5,dikPath)">
                                    <image class="image" :src="dikPath"></image>
                                </div>
                            </div>

                            <text style="color:#999999;margin-top:10">备注</text>
                            <div class="img-div" @click="previewPhoto(6,remarkPath)">
                                <image class="image" :src="remarkPath"></image>
                            </div>

                            <text style="color:#999999;margin-top:10">项目详情</text>
                            <div class="img-row">
                                <div class="img-div-wrap"  v-for="(item,index) in upkeepCentPhotos" :key="index" @click="previewPhoto(index+7,item)">
                                    <image class="image" :src="item"></image>
                                </div>
                            </div>

                            <text style="color:#999999;margin-top:10">维保人员签字</text>
                            <div class="img-row">
                                <div class="img-div" @click="previewPhoto(upkeepCentPhotos.length+7,maintenanceSignPhotos[0])">
                                    <image class="image" :src="maintenanceSignPhotos[0]"></image>
                                </div>
                                <div class="img-div" @click="previewPhoto(upkeepCentPhotos.length+8,maintenanceSignPhotos[1])">
                                    <image class="image" :src="maintenanceSignPhotos[1]"></image>
                                </div>
                            </div>

                            <text style="color:#999999;margin-top:10">物业签字</text>
                            <div class="img-div" @click="previewPhoto(upkeepCentPhotos.length+9,propertySignPhotos[0])">
                                <image class="image" :src="propertySignPhotos[0]"></image>
                            </div>
                        </div>
                    </scroller>
                </div>
                <div class="slider-item">
                    <scroller class="container" :style="scrollerStyle">
                        <div class="upload-div">
                            <text style="margin-top:20">维保报告：</text>
                            <textarea class="textArea" :rows="6" :value="data.report" :disabled="true"></textarea>
                            <text style="margin-top:20">物业需配合事项：</text>
                            <textarea class="textArea" :rows="6" :value="data.items" :disabled="true"></textarea>
                            <text style="margin-top:20">物业评论：</text>
                            <textarea class="textArea" :rows="6" :value="data.assessment" :disabled="true"></textarea>
                        </div>
                    </scroller>
                </div>
            </slider>
        <!-- <wxc-tab-page ref="wxc-tab-page"
            :tab-titles="tabTitles"
            :tab-styles="tabStyles"
            title-type="text"
            :tab-page-height="tabPageHeight">
            <scroller class="container" :style="scrollerStyle">
                <div class="upload-div">
                    <text style="color:#999999;margin-top:20">现场、机房、轿厢、轿顶、层站、底坑(以上位置必须上传)
                    </text>
                    <div class="img-row">
                        <div class="img-div" @click="previewPhoto(0,heyPath)">
                            <image class="image" :src="heyPath"></image>
                        </div>
                        <div class="img-div" @click="previewPhoto(1,jifPath)">
                            <image class="image" :src="jifPath"></image>
                        </div>
                    </div>
                    <div class="img-row">
                        <div class="img-div" @click="previewPhoto(2,jiaoxPath)">
                            <image class="image" :src="jiaoxPath"></image>
                        </div>
                        <div class="img-div" @click="previewPhoto(3,jiaodPath)">
                            <image class="image" :src="jiaodPath"></image>
                        </div>
                    </div>
                    <div class="img-row">
                        <div class="img-div" @click="previewPhoto(4,cengzPath)">
                            <image class="image" :src="cengzPath"></image>
                        </div>
                        <div class="img-div" @click="previewPhoto(5,dikPath)">
                            <image class="image" :src="dikPath"></image>
                        </div>
                    </div>

                    <text style="color:#999999;margin-top:10">备注</text>
                    <div class="img-div" @click="previewPhoto(6,remarkPath)">
                        <image class="image" :src="remarkPath"></image>
                    </div>

                    <text style="color:#999999;margin-top:10">项目详情</text>
                    <div class="img-row">
                        <div class="img-div-wrap"  v-for="(item,index) in upkeepCentPhotos" :key="index" @click="previewPhoto(index+7,item)">
                            <image class="image" :src="item"></image>
                        </div>
                    </div>

                    <text style="color:#999999;margin-top:10">维保人员签字</text>
                    <div class="img-row">
                        <div class="img-div" @click="previewPhoto(upkeepCentPhotos.length+7,maintenanceSignPhotos[0])">
                            <image class="image" :src="maintenanceSignPhotos[0]"></image>
                        </div>
                        <div class="img-div" @click="previewPhoto(upkeepCentPhotos.length+8,maintenanceSignPhotos[1])">
                            <image class="image" :src="maintenanceSignPhotos[1]"></image>
                        </div>
                    </div>

                    <text style="color:#999999;margin-top:10">物业签字</text>
                    <div class="img-div" @click="previewPhoto(upkeepCentPhotos.length+9,propertySignPhotos[0])">
                        <image class="image" :src="propertySignPhotos[0]"></image>
                    </div>
                </div>
            </scroller>
            <scroller class="container" :style="scrollerStyle">
                <div class="upload-div">
                    <text style="margin-top:20">维保报告：</text>
                    <textarea class="textArea" :rows="6" :value="data.report" :disabled="true"></textarea>
                    <text style="margin-top:20">物业需配合事项：</text>
                    <textarea class="textArea" :rows="6" :value="data.items" :disabled="true"></textarea>
                    <text style="margin-top:20">物业评论：</text>
                    <textarea class="textArea" :rows="6" :value="data.assessment" :disabled="true"></textarea>
                </div>
            </scroller>
        </wxc-tab-page> -->
    </div>

</template>
<script>
    import { WxcTabPage, Utils,WxcCell,WxcButton,WxcLoading,WxcDialog } from 'weex-ui';
    import {buiTabbar} from 'bui-weex';
    export default {
        components:{
            WxcTabPage,
            Utils,
            WxcCell,
            WxcButton,
            WxcLoading,
            WxcDialog ,
            buiTabbar,
        },
        data () {
            return{
                token:'',
                currentTab:0,
                tabTitles: [
                    {title: '保单照片'},
                    {title: '备注'}
                ],
                tabStyles: {
                    bgColor: '#FFFFFF',
                    titleColor: '#666666',
                    activeTitleColor: '#f49428',
                    activeBgColor: '#FFFFFF',
                    isActiveTitleBold: false,
                    // iconWidth: 70,
                    // iconHeight: 70,
                    width: 375,
                    height: 100,
                    fontSize: 30,
                    hasActiveBottom: true,
                    activeBottomColor: '#f49428',
                    activeBottomHeight: 6,
                    activeBottomWidth: 375,
                },
                
                btnStyle:{
                    backgroundColor:'#ffffff',
                    borderColor: '#dfdfdf',
                },
                mask:true,
                data:{},
                heyPath:'',
                jifPath:'',
                jiaoxPath:'',
                jiaodPath:'',
                cengzPath:'',
                dikPath:'',
                remarkPath:'',
                upkeepCentPhotos: [],
                maintenanceSignPhotos: [],
                propertySignPhotos: [],
                imageList:[],
            }
        },
        methods: {
            getMyPhotos(){
                let filter = {}
                filter.upkeepId = this.data.upkeepId
                filter.staff1Id = this.data.staff1Id
                this.$fetch({
                    header:{
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Authorization': `Bearer `+ this.token
                    },
                    method: 'POST',    
                    name: 'getMyPhotos',
                    data: filter
                }).then(res => {
                    if(res.success){
                        if(res.data){
                            this.heyPath = res.data.heyPath ? res.data.heyPath : ''
                            this.jifPath = res.data.jifPath ? res.data.jifPath : ''
                            this.jiaoxPath = res.data.jiaoxPath ? res.data.jiaoxPath : ''
                            this.jiaodPath = res.data.jiaodPath ? res.data.jiaodPath : ''
                            this.cengzPath = res.data.cengzPath ? res.data.cengzPath : ''
                            this.dikPath = res.data.dikPath ? res.data.dikPath : ''
                            this.remarkPath = res.data.remarkPath ? res.data.remarkPath : ''
                            this.upkeepCentPhotos = res.data.upkeepCentPhotos ? res.data.upkeepCentPhotos.split(',') : []
                            this.imageList.push(this.heyPath)
                            this.imageList.push(this.jifPath)
                            this.imageList.push(this.jiaoxPath)
                            this.imageList.push(this.jiaodPath)
                            this.imageList.push(this.cengzPath)
                            this.imageList.push(this.dikPath)
                            this.imageList.push(this.remarkPath)
                            this.imageList = this.imageList.concat(this.upkeepCentPhotos)
                            this.imageList = this.imageList.concat(this.maintenanceSignPhotos)
                            this.imageList = this.imageList.concat(this.propertySignPhotos)
                        }
                    }else{
                        this.$notice.toast({
                            message: '网络错误'
                        })
                    }
                }, error => {
                    this.$notice.toast({
                        message: '网络错误'
                    })
                })
            },
            previewPhoto(index,path){
                if(path){
                    this.$image.preview({
                        index: index,                     // 所点击图片下标
                        images: this.imageList,        // 图片的网络地址
                    })
                }
            },
            onSliderChange(e){
                var index = e.index;
                this.currentTab=index;
            },
        },
        created(){
            this.$notice.loading.show()
            const tabPageHeight = Utils.env.getPageHeight()
            this.containerHeight = tabPageHeight-this.tabStyles.height-30
            this.scrollerStyle ={ height: this.containerHeight + 'px' }

            // 获取token
            this.token = this.$storage.getSync('token')
            if(!this.token){
                this.$router.setHomePage('/pages/login.js')
            }

            this.$router.getParams().then(resData => {
                this.data = resData.upkeepDetail
                this.maintenanceSignPhotos = this.data.signature1 ? this.data.signature1.split(',') : []
                this.propertySignPhotos = this.data.signature2 ? this.data.signature2.split(',') : []
                this.getMyPhotos()

            })
            this.$notice.loading.hide()
        },
    }
</script>

<style scoped>
    .container {
        flex: 1;
        width: 750px;
        background-color: #f2f3f4;
    }
    .upload-div{
        margin:0 10 0 10;
        flex-direction: column;
    }
    .img-row{
        flex-direction: row;
        flex-wrap: wrap;
        display: flex;
    }
    .img-div{
        flex: 1;
        margin: 10;
        height: 360 ;
        width: 345;
        background-color: #e2e2e2;
        justify-content: center;
        align-items: center;
    }
    .img-div-wrap{
        margin: 10;
        height: 360 ;
        width: 345;
        background-color: #e2e2e2;
        justify-content: center;
        align-items: center;
    }
    .text{
        color: #999999;
        font-size: 35;
    }
    .image{
        width: 360;
        height: 360;
    }
    .div-button{
        flex-direction: row;
        justify-content: space-around;
        margin-top: 20px;
        margin-bottom: 20px;
    }   
    .textArea{
        background-color: #ffffff;
        color:#999999;
        margin-left: 50px;
        margin-right: 50px;
        margin-top: 20px;
    }
    .slider{
        flex:1;
    }
    .slider-item{
        width: 750px;
        justify-content: center;
        align-items: center;
    }
</style>
